<template>
    <div class="join">
        <div v-if="success" class="join-success">
            <div class="success-title">报名成功</div>
            <img class="user-avatar" :src="user.avatar || '//ossweb-img.qq.com/images/lol/img/champion/Zoe.png'">
            <div class="user-nickname">{{user.nickname}}</div>
            <h3 class="mt-3">您的兑奖号码</h3>
            <div class="user-number">{{user.number}}</div>
            <div class="success-tip">
                您可以截图保存，以免兑奖时无法找到
            </div>
        </div>
    </div>
</template>

<script>
    import API from 'src/api/home';
    import {getQueryString} from 'src/utils/common';

    export default {
        name: 'Join',
        computed: {
            code() {
                return getQueryString('code');
            },
            classify() {
                return this.$route.query.classify;
            },
            testCode() {
                return this.$route.query.testCode;
            }
        },
        data() {
            return {
                user: {},
                success: false
            }
        },
        created() {
            if (this.$route.query['test']) {
                this.fadeLogin(this.$route.query['test']);
            } else {
                this.checkStatus();
            }
        },
        methods: {
            /**
             * 判断当前页面状态，
             * 如果未登录，则请求，否则直接跳过
             * 1、若第一进入，没有code，则使用微信重定向地址，获取code
             * 2、若有code，则使用code向后台获取access_token
             */
            checkStatus() {
                if (this.code) {
                    this.wxLogin();
                } else {
                    this.redirect();
                }

            },
            redirect() {
                // 微信appId
                const appId = 'wxb4802e630b7a81ad';
                // 为了保留访问参数，将访问参数转码后存入state中，之后再拼接回来
                const redirectUrl = encodeURIComponent(location.href);
                const scope = 'snsapi_userinfo';
                location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`);
            },
            /**
             * 向后台执行登陆
             */
            wxLogin() {
                if(this.testCode) {
                    return;
                }
                this.loginByCode(this.code);
            },
            /**
             * @param preview 登陆后跳转预览页面
             */
            loginByCode(code) {
                // 报名
                API.join(code, this.classify)
                    .then((res) => {
                        // 报名成功，返回user数据
                        this.joinSuccess(res);
                    })
                    .catch((err) => {
                        alert(err.data.message);
                    });
            },
            fadeLogin(openId) {
                API.joinTest(new Date().getTime(), this.classify)
                    .then((res) => {
                        this.joinSuccess(res);
                    })
                    .catch((err) => {
                        alert(err.data.message);
                    });
            },
            joinSuccess(res) {
                this.success = true;
                this.user = Object.assign(this.user, res);
            }
        }
    };
</script>

<style scoped lang="scss">
    .join {
        height: 100vh;
        .join-success {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .success-title {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            background: #4CAF50;
            font-size: 0.36rem;
            color: white;
            text-align: center;
            letter-spacing: 2px;
        }
        .user-avatar {
            margin-top: 1rem;
            width: 2rem;
            height: 2rem;
            display: block;
            background-color: lightgray;
            border-radius: 50%;
        }
        .user-nickname {
            margin-top: 0.3rem;
            font-size: 0.32rem;
        }
        .user-number {
            margin-top: 0.3rem;
            font-weight: bold;
            font-size: 1rem;
            letter-spacing: 0.4rem;
        }
        .success-tip {
            margin-top: 0.5rem;
            font-size: 0.28rem;
            color: #FF5722;
        }
    }
</style>